<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :is-show-btn="false"
        :elements="filterElements"
        @submit="handleSearch"
      >
        <!-- <Button
          style="display: inline-block; margin-right: 10px"
          @click="handleImplement"
          >执行</Button
        > -->
        <Button
          style="display: inline-block"
          @click="handleResult"
        >执行分摊</Button>
      </FilterForm>
    </Container>
    <Container
      v-loading="tableLoading"
      height="fill"
      :scroll-y="true"
      display="flexY"
    >
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 30px;
          margin-right: 30px;
          margin-bottom: 15px;
        "
      >
        <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="../../assets/image/kaishi.png" alt="">
          </div>

          <div class="textStyle">开始</div>
        </div>
        <div>
          <img src="../../assets/image/jiantou.png" alt="">
        </div>
        <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="../../assets/image/glft.png" alt="">
          </div>

          <div class="textStyle">管理分摊</div>
        </div>
        <div>
          <img src="../../assets/image/jiantou.png" alt="">
        </div>

        <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="../../assets/image/yfft.png" alt="">
          </div>

          <div class="textStyle">医辅分摊</div>
        </div>
        <div>
          <img src="../../assets/image/jiantou.png" alt="">
        </div>

        <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="../../assets/image/yjft.png" alt="">
          </div>

          <div class="textStyle">医技分摊</div>
        </div>
        <div>
          <img src="../../assets/image/jiantou.png" alt="">
        </div>

        <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="../../assets/image/wancheng.png" alt="">
          </div>

          <div class="textStyle">完成</div>
        </div>
      </div>
      <!-- <el-divider content-position="left"></el-divider> -->
      <OperationContainer class="btn-box">
        未完整分摊科室     <Button
          style="display: inline-block;width:80px;margin-left:15px;"
          @click="handleExport"
        >导出</Button>
      </OperationContainer>

      <el-table
        ref="tableref"
        v-loading="tableLoading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8' }"
        header-row-class-name="ck-table-header"
        row-class-name="ck-table-row"
        size="small"
        height="100%"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="50"
        />
        <el-table-column prop="deptCode" label="科室代码">
          <template slot-scope="scope">
            <div class="text-btn">
              {{ scope.row.deptCode }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="科室名称" />
        <el-table-column
          prop="amortizationName"
          label="分摊规则"
        />
        <el-table-column
          prop="amount"
          label="直接成本"
        />
        <el-table-column
          prop="indirectCost"
          label="间接成本"
        />
      </el-table>
    </Container>
  </ContainerGroup>
</template>

<script>
import { insertCoefficient, quickAmortization, noAmortizationDept, exportExcel7 } from '@/utils/apis/dataAccount'
import { listAmortizationDataByPDeptCode } from '@/utils/apis/report'
import { DateDTO } from '@/utils/quickAmortization'
export default {
  name: 'Wage', // 科室-工资对应
  components: {},
  data() {
    return {
      newParamList: {},
      tableData: [],
      tableLoading: false,
      schools: [],
      filterElements: [
        {
          key: 'yearMonth',
          type: 'date-picker',
          label: '年/月',
          mode: 'month',
          type: 'date-picker',
          format: 'yyyy-MM',
          value: this.$util.currentDate(),
          width: 210
        }
        // {
        //   filterable: true,
        //   clearable: true,
        //   key: "billDeptCode",
        //   type: "Select",
        //   label: "院区",
        //   value: "",
        //   itemLabel: "deptName",
        //   itemValue: "deptCode",
        //   width: 210,
        //   multiple: true,
        //   collapseTags: true,
        //   options: [],
        // },
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleExport() { // 导出
      const date = this.newParamList.yearMonth
      const currentYear = new Date(date).getFullYear()
      const currentMonth = new Date(date).getMonth() + 1
      const param = {
        month: currentMonth,
        yard: '1',
        year: currentYear
      }
      exportExcel7(param).then(res => {
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '成本分摊.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    handleSearch(value) {
      this.newParamList = value
      this.getData()
    },
    handleImplement() {
      // 执行
    },
    handleResult() {
      // 生成结果
      const date = this.$refs.filterForm.getParms()?.yearMonth
      const currentYear = new Date(date).getFullYear()
      const currentMonth = new Date(date).getMonth() + 1

      // let param = {
      //   endTime: `${currentYear}-${currentMonth}-${this.formatNumber(
      //     new Date(currentYear, currentMonth, 0).getDate()
      //   )} 23:59:59`,
      //   month: this.formatNumber(currentMonth),
      //   starTime: `${currentYear}-${currentMonth}-${this.formatNumber(
      //     new Date(currentYear, currentMonth, 1).getDate()
      //   )} 00:00:00`,
      //   year: currentYear,
      // };
      const dateDTO = new DateDTO()
      dateDTO.year = currentYear
      dateDTO.month = currentMonth
      this.tableLoading = true
      quickAmortization(dateDTO).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getData()
        } else {
          this.$message.error(res.data.message)
        }
        this.tableLoading = false
      })
    },
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : `0${n}`
    },
    getData() {
      this.$nextTick(() => {
        const date = this.newParamList.yearMonth
        const currentYear = new Date(date).getFullYear()
        const currentMonth = new Date(date).getMonth() + 1
        const param = {
          month: currentMonth,
          yard: '1',
          year: currentYear
        }
        this.tableLoading = true
        noAmortizationDept(param).then((res) => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data
          }
        })
      })
    },
    resetForm() {},
    searchSubmit() {},
    createNewData() {},
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
/deep/.el-divider__text {
  font-size: 15px;
  font-weight: bold;
}
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}

.box {
  width: 220px;
  height: 200px;
  opacity: 1;
  background: #f0f2f5;
  border-radius: 15px;
}

.textStyle {
  text-align: center;
  margin-top: 20px;
  height: 19px;
  opacity: 1;
  font-size: 20px;
  font-weight: 400;
  color: #555555;
}
</style>
